<template>
    <div class="work-order-content">
        <div class="work-order">
            <ul>
                <li>
                    <div class="icon icon1"></div>
                    <div class="label">创建工单</div>
                </li>
                <li class="arrow"></li>
                <li>
                    <div class="icon icon2"></div>
                    <div class="label">初审中</div>
                </li>
                <li class="arrow"></li>
                <li>
                    <div class="icon icon3"></div>
                    <div class="label">终审中</div>
                </li>
                <li class="arrow"></li>
                <li>
                    <div class="icon icon4"></div>
                    <div class="label">已完结</div>
                </li>
            </ul>
        </div>
        <p>牛域网累计为您完成了{{ props.data }}份工单，预计共节约了{{ (props.data || 0) * 1000}}元</p>
    </div>
</template>
<script lang="ts" setup>
const props = defineProps({
    data: Number
})
</script>
<style lang="scss" scoped>
.work-order-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: calc(100% - 74px);
}
.work-order {
    width: 100%;
    display: flex;
    justify-content: center;

    ul{
        width: 80%;
        display: flex;
        justify-content: space-between;

        li{
            width: 16%;
            display: flex;
            flex-direction: column;
            align-items: center;

            &.arrow{
                width: 16px;
                height: 13px;
                background-image: url('../../assets/enterprise/w5.png');
                background-size: cover;
                margin-top: 16px;
            }

            .label{
                color: #666;
                font-size: 15px;
                margin-top: 10px;
            }

            .icon{
                width: 44px;
                height: 44px;
                position: relative;

                &.icon1{
                    background-image: url('../../assets/enterprise/w1.png');
                    background-size: cover;
                }

                &.icon2{
                    background-image: url('../../assets/enterprise/w2.png');
                    background-size: cover;
                }

                &.icon3{
                    background-image: url('../../assets/enterprise/w3.png');
                    background-size: cover;
                }
                
                &.icon4{
                    background-image: url('../../assets/enterprise/w4.png');
                    background-size: cover;
                }
            }
        }
    }
}
p{
    text-align: center;
    font-size: 16px;
    color: #005fab;
}
</style>